<template>
<!-- components/sticky/sticky.ttml -->
<view class="sticky-box">
	<view class="sticky-left">
		<text>{{sticky.left}}</text>
	</view>
	<view class="sticky-right" @tap="switchNear">
		<text>{{sticky.right}}</text>
	</view>
</view>
</template>

<script>

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    sticky: {
      type: Object,
      default: () => ({
        "left": "",
        "right": ""
      })
    }
  },
  methods: {
    switchNear() {
      this.$emit("switch");
    }

  }
};
</script>
<style>
/* components/sticky/sticky.ttss */

@import "../../styles/icon.css";
.sticky-box {
    height: 80rpx;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    background: #ffffff;
    top: 0;
}

.sticky-left {
    float: left;
    line-height: 80rpx;
    width: 40%;
    padding-left: 40rpx;
    font-size: 32rpx;
}

.sticky-right {
    float: right;
    line-height: 80rpx;
    width: 40%;
    text-align: right;
    padding-right: 40rpx;
    color: #888888;
    font-size: 20rpx;
}
</style>